<template>
  <div>
    <!-- <h1>NewsList</h1> -->
    <ul class="NewList-ul">
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:1" @click.native="fun"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:{{msg}}次</span></p>
          </div>

      </li>
       <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
      <li>
          <img src="../../lunbo/1.jpg" alt="">

          <div class="body">
            <router-link to="/home/newsinfo/:2"><h3>内容内容内容内人呢...</h3></router-link>
            <p><span>2018年9月1日</span><span>点击次数:0次</span></p>
          </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
data(){
    return {
      msg : 3,
    }
  },
  methods : {
    fun(){
      this.msg ++;
      // alert(this.msg)
    }
  }
}
</script>
<style scoped>
  .NewList-ul{
    list-style: none;
    border: 0;
    padding: 0;
    margin: 2px;
  }
  .NewList-ul li{
    height: 82.5px;
  }
  .NewList-ul img{
    margin-right: 4px;
    width: 80px;
    height: 80px;
    float: left;
  }
  .NewList-ul div{
    padding: 10px;
    white-space : nowrap;
    overflow : hidde;
    text-overflow : ellipsis;

  }
  .NewList-ul div p{
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    color: blue;
  }
  .NewList-ul div a{
    color: black;
  }
  .NewList-ul div a:hover{
    text-decoration: underline;
  }
</style>


